<template>
   <div >

    <div class="ArticleBack flex" v-if="SquareArticle?.length > 0">
        <div v-for="item in SquareArticle" :key="item.id" class="ArticleOne">
             <ArticleCard :article="item"/>
         </div>
    </div>

     <!-- 分页器 -->
      <Pagination id="Pagination" :PageInfo="SquareArticleInfo" :changePage="changePage" v-if="SquareArticleInfo.total > 0 && SquareArticleInfo.total > SquareArticleInfo.length" />


   </div>
</template>
<script>
import Pagination from '@/components/Package/Pagination/Pagination.vue'
import { mapActions, mapMutations, mapState } from 'vuex'
import ArticleCard from './ArticleCard/ArticleCard.vue'
  export default 
  {
  components: { ArticleCard, Pagination },
     name :'', 
   
     computed:{
        ...mapState('Square',['SquareArticle','SquareArticleInfo']), //广场博客
        ...mapState('Login',['User']),//用户登录信息
     },
     created() {
        this.init()
     },
     methods: {
        ...mapActions('Square',['GetSquareArticle','ChangePageNo']), //获取广场博客

        ...mapMutations('Tool',['SETNAVIGATION']),

         changePage(newPageNo){
            let createdUid = this.User?.uid 
           this.ChangePageNo({newPageNo,createdUid})
        },

        async init(){ //初始化
           this.SETNAVIGATION([true,true])

           let createdUid = this.User?.uid 
           let res  = await this.GetSquareArticle({createdUid})
           if(!res || res?.code !=200) this.$message.error(res?.message)
     
        }
     },
  }
</script>
<style scoped lang='less'>
.ArticleBack{
    width: 100%;
    justify-content: flex-start;
}
.ArticleOne{
    margin-right: 20px;
    margin-bottom: 20px;
    width: calc(20% - 20px);
    min-width: 200px;
}
#Pagination{
    // position:absolute;
    bottom: 10px;
  
}
@media screen and (min-width:1300px) and  (max-width: 1600px) {
    div.ArticleOne{
        width: calc(25% - 20px);  
    }
}

@media screen and (min-width:1100px) and  (max-width: 1300px) {
    div.ArticleOne{
        width: calc(33.3% - 20px);  
    }
}
@media screen and (min-width:900px) and (max-width: 1100px) {
    div.ArticleOne{
        width: calc(50% - 20px);  
    }
}
@media screen and (max-width: 900px) {
    div.ArticleOne{
        width: calc(100% - 20px);  
    }
}
</style>